<template>
    <div>
        <div class="line">
            1. fixed 本身是相对屏幕视口来定位，但是当元素祖先的 transform、perspective、filter 或 backdrop-filter 属性非 none 时，容器由视口改为该祖先
        </div>
        <div  class="line">
            2. 给图片加光圈效果，或者两个相叠加的元素(例如气泡和箭头)设置严丝合缝的box-shadow，不如使用filter: drop-shadow(0 0 10px grey)，针对像素点设置阴影
            <br />
             一键黑白也用它：filter：grayscale(1)
             <div style="display: flex;justify-content: center;align-items: center;margin-top:40px;">
                <div class="filter-box box-shadow">
                    box-shadow
                    <div></div>
                </div>
                <div class="filter-box drop-shadow">
                    drop-shadow
                    <div></div>
                </div>
                <div style="margin-right: 30px">
                    <p>box-shadow</p>
                    <img class="img-drop box-shadow" src="../assets/img3.webp" alt="">
                </div>
               <div>
                   <p>drop-shadow</p>
                   <img class="img-drop drop-shadow" src="../assets/img3.webp" alt="">
               </div>
                
             </div>
        </div>
        <div class="line">
            3. writing-mode + text-orientation
        </div>
        <div class="poem">
            <div style="font-size: 30px; font-weight: bold;">临江仙</div>
            <div style="font-size:11px;color:#aaa;text-align:end">
                <span>杨慎</span>  
                <span class="year">1898 </span> ~
                <span class="year">1999 </span> 
            </div>
            <p> 滚滚长江东逝水</p>
            <p> 浪花淘尽英雄</p>
            <p> 是非成败转头空</p>
        </div>
        <div class="line">
            4. document.querySelectorAll的优势
            <p>document.getElementsByClassName获取到的HTMLCollection是动态的，当复制节点再循环插入页面会造成死循环</p>
            <p>document.querySelectorAll获取的dom是静态的NodeList，不会造成死循环 </p>
        </div>
        <div class="line">
            5. 暂停动画样式：animation-play-state：paused
            <div class="animation-state">
                <img style="transform:rotateY(0deg) translateZ(100px);" src="../assets/img1.webp" alt="">
                <img style="transform: rotateY(60deg) translateZ(100px);" src="../assets/img2.webp" alt="">
                <img style="transform: rotateY(120deg) translateZ(100px);" src="../assets/img3.webp" alt="">
                <img style="transform: rotateY(180deg) translateZ(100px);" src="../assets/img4.webp" alt="">
                <img style="transform: rotateY(240deg) translateZ(100px);" src="../assets/img5.webp" alt="">
                <img style="transform: rotateY(300deg) translateZ(100px);" src="../assets/img6.webp" alt="">
            </div>
        </div>
    </div>
</template>

<script setup>

</script>

<style  scoped>
.line {
    padding: 20px;
}
.filter-box {
    width: 150px;
    background-color: pink;
    height: 50px;
    line-height: 50px;
    position: relative;
    border-radius: 10px;
    margin-right: 60px
}
.box-shadow{
    box-shadow: 0 0 10px grey;
}
.drop-shadow {
    filter: drop-shadow(0 0 10px grey)
}
.filter-box > div {
    position: absolute;
    top: 50%;
    left: -20px;
    transform: translateY(-50%);
    width: 0;
    border: 10px solid;
    border-color: transparent pink transparent transparent 
}
.img-drop {
    width: 400px;
    height: 200px;
}
.poem {
    margin: auto;
    writing-mode: vertical-rl;
}
.year {
    /* 文本朝向：从上到下 */
    text-orientation: upright; 
    /* 文本朝向后横向组合起来 */
    text-combine-upright: all;
}
/* //  */
.animation-state {
    transform-style: preserve-3d;
    position:relative;
    perspective: 1200px;
    width: 200px;
    height: 50px;
    margin: auto;
    animation: rotate-img 20s linear infinite
    /* 本身是暂停 */
    /* animation: rotate-img 20s linear paused infinite */ 

}
@keyframes rotate-img {
    0% {
        transform: rotateY(0deg);
    }
    100% {
        transform: rotateY(360deg);
    }
}
.animation-state img {
    width: 100px;
    height: 50px;
    position: absolute;
    top:0;
    left:0;
}
.animation-state:hover {
    animation-play-state: paused;
    /* animation-play-state: running; */
}
</style>